{layout name="layout" /}
<!-- 引入layui -->
<script src="/static/frontend/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<style>
    .page {
        width: 100%;
        height: 100px;
        display: flex;
        justify-content: center;
    }
    .item {
        margin-bottom: 20px;
    }
    .result>a:hover {
        color: #00b7ee;
    }
</style>

<!--结果展示区-->
<div class="result wrap">
    {foreach $articleList as $article}
    <a href="/frontend/all-article/detail?id={$article.id}">
        <div class="item">
            <h2>{$article.title}</h2>
            <p>{$article.content|raw}</p>
            <p>时间：{$article.create_time}</p>
        </div>
    </a>
    {/foreach}

    <div class="page">
        <div id="page"></div>
    </div>
</div>

<script>
    layui.use(['jquery', 'layer', 'laypage'], function () {
        var $ = layui.jquery,
            laypage = layui.laypage;

        // jquery页面加载事件，用来渲染高亮标签
        $(function () {
            $('.highlight').css({
                'color': 'red'
            });
        });

        laypage.render({
            elem: 'page',
            count: {$count},
            limit: 2,
            curr: {$page},
            jump: function (obj, first) {
                //首次不执行
                if(!first){
                    window.location.href='/frontend/all-article/list?page='+obj.curr+'&limit='+obj.limit+'&keyword={$keyword}';
                }
            }
        });
    });
</script>